<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-10-25 14:11:20
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-03-13 10:59:22
 * @FilePath: \old-supply-shop_vue\components\storeMap\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <!-- <map
      id="map"
      class="map"
      scale="12"
      :markers="markers"
      :latitude="location.lat"
      :longitude="location.lng"
    ></map> -->
  </div>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  props: {},
  data() {
    return {
      markers: [], // 点
      location: {
        // 位置
        lng: "",
        lat: "",
      },
    };
  },
  onReady() {
    // this.addMarkers();
    // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
    // this._mapContext.initMarkerCluster({
    //   enableDefaultStyle: false,
    //   zoomOnClick: true,
    //   gridSize: 60,
    //   complete(res) {
    //     console.log("initMarkerCluster", res);
    //   },
    // });
    // this._mapContext.on("markerClusterCreate", (e) => {
    //   console.log("markerClusterCreate", e);
    // });
    let _mapContext = uni.createMapContext("map", this);
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    // 获取位置
    async getLocation() {
      try {
        const result = await uni.getLocation({
          type: "gcj02",
        });
        const locationObj = result[1];
        let lng = locationObj.longitude;
        let lat = locationObj.latitude;
        this.location = {
          lng,
          lat,
        };
        let option = {
          lng,
          lat,
          page: 1,
          size: 100000,
          name: "",
        };

        $https(
          "GET",
          "getStoreList",
          option,
          (res) => {
            if (res.data.errcode == 0) {
              let list = res.data.data.list;
              // 传递列表和位置信息
              this.$emit("getList", { list, location: this.location });
              this.addMarkers(list);
            } else {
              this.$u.toast(res.data.errmsg);
            }
          },
          true
        );
      } catch (error) {
        console.log("获取位置信息失败: " + JSON.stringify(error));
      }
    },
    addMarkers(list) {
      const markers = [];

      list.forEach((p, i) => {
        markers.push({
          id: i + 1,
          iconPath: "../../static/image/positioning.png",
          latitude: p.lat,
          longitude: p.lng,
        });
      });
      this.markers = markers;
    },
  },
};
</script>

<style lang='scss' scoped>
.content {
  map {
    width: 100%;
    height: 600rpx;
  }
}
</style>